<template>
  <div class="home" v-red="color">
    <button v-red="'green'" @click="tab('green')">按钮1</button>
    <button v-red:[name]="'red'" @click="tab('red')">按钮2</button>
    <!-- <p v-red>{{num}}</p>
    <button @click="num++">num++</button> -->
    <input type="text" v-focus>
     <div ref="box">34567890</div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {ref,onMounted,onBeforeMount,nextTick} from 'vue'
export default {
//   name: 'HomeView',
  components: {
    // HelloWorld
  },
  setup(){
    const color = ref('')
    const name = ref('zs')
    const num = ref(10)
    const box = ref(null)
    const tab = (val)=>{
        color.value = val
    }
    onBeforeMount(()=>{
        console.log('挂载之前');
        nextTick(()=>{
             console.log(box.value);//获取到box的dom节点
        }) 

    })
    onMounted(()=>{
        console.log('挂载之后');
        console.log(box.value);//获取到box的dom节点
    })
    return {color,tab,num,name,box}

  },
  directives:{
    red:{
        
        updated(el,binding,vnode,prevnode) {
            console.log('我会触发吗');
            console.log(el);//绑定自定义指令的dom节点
            console.log(binding);//对象  binding.value 自定义指令的值
            // el.style.background = binding.value
            // binding.arg  自定义指令的参数
            if(binding.value == 'green'){
                el.style.background = 'yellow'
            }else{
                el.style.background = 'pink'
            }
            

            
        },
    }
  }
}
</script>
